<template>
  <div>
    <el-dialog
      :title="dialog.title"
      :show="show"
      :width="dialog.width"
      :visible.sync="visible"
      :before-close="handleClose"
    >
      <div class="formDuv">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="内容" prop="content">
            <el-input
              type="textarea"
              v-model="form.content"
              rows="10"
            ></el-input>
          </el-form-item>
          <el-form-item prop="star">
            <el-rate v-model="form.star" :colors="colors"> </el-rate>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime" class="el-form-endTime">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { CreateBussinessType, UpdateBussinessType } from "../index";
// import {
//   usualInput,
//   usualInputNumber,
//   usualTextarea,
// } from "@/util/validater.js";
import { postRequest } from "@/api/request.js";
import { worker } from "@/api/config.js";
export default {
  props: {
    dialog: {
      type: Object,
      defalut: {},
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show() {
      this.visible = this.show;
        this.form={
        content: null,
        endTime: null,
        star: 0,
      }
    },
  },
  data() {
    return {
      colors: ["#99A9BF", "#fb7d7d","#ec1010"],
      visible: this.show,
      form: {
        content: null,
        endTime: null,
        star: 0,
      },
      //规则
      rules: {
        content: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        star: [
          {
            required: true,
            message: "必选",
            trigger: "blur",
          },
        ],
      },
      stockInOutTypeDescdata: [
        {
          value: "入库",
          key: 1,
        },
        {
          value: "出库",
          key: 2,
        },
      ],
      minWidth: 0,
    };
  },
  name: "Adialog",
  methods: {
    handleClose(done) {
      this.visible = false;
       this.dialog.shows();
    },
    //设置宽度最小值
    setMinWidthEmpty(val) {
      this.minWidth = val.srcElement.clientWidth;
      //无数据情况下
      var mpty = document.getElementsByClassName("el-select-dropdown__empty");
      if (mpty.length > 0) {
        mpty[0].style["min-width"] = val.srcElement.clientWidth + 2 + "px";
      }
    },
    submitForm(fromname) {
      var self = this;
      this.$refs[fromname].validate((v) => {
        if (v) {
          postRequest({
            url: worker.insertContent,
            data: self.form,
            successs: function (res) {
              (self.form = {
                content: null,
                endTime: null,
                star: 0,
              }),
                self.$message({
                  message: "成功",
                  type: "success",
                });

              self.visible = false;
                self.dialog.fn();
            },
          });
        }
      });
    },
    resetForm(fromname) {
      (this.form = {
        content: null,
        endTime: null,
        star: 0,
      }),
        (this.visible = false);
        this.dialog.shows();
    },
  },
};
</script>
<style lang='less' scoped >
.el-form-endTime {
  width: 40%;
}
</style>